<script>
import { Table as YsTable, TableUtils } from '@/components/YS/Table'
import api from '@/api'

export default {
  name: 'AdminAdminIndex',
  components: {
    YsTable
  },
  data () {
    return {
      tableConfig: {
        tableTitle: '管理员列表',
        extend: {
          actions: {
            add: () => import('@/views/admin/admin/add'),
            detail: () => import('@/views/admin/admin/detail'),
            edit: () => import('@/views/admin/admin/edit'),
            delete: api.admin.admin.del,
            multi: api.admin.admin.multi
          }
        },
        toolbars: [{
          name: 'multi',
          formatter: (t) => TableUtils.formatter.toolbars.multi({
            'field=status&value=1': <span><a-icon type="eye" />{this.__('状态设为正常')}</span>,
            'field=status&value=0': <span><a-icon type="eye-invisible" />{this.__('状态设为禁用')}</span>
          }, t)
        }],
        // 加载数据方法 必须为 Promise 对象
        url: api.admin.admin.index,
        scroll: { x: 'calc(1200px + 50%)' },
        showRowSelection: row => { return !!row.disabled }, // 复选框 (动态渲染)
        rowKey: 'id',
        columns: [
          { title: this.__('ID'), dataIndex: 'id', searchName: 'a.id', sorter: true, ops: 'BETWEEN', fixed: 'left', width: 80 },
          { title: this.__('头像'), dataIndex: 'avatar', ops: false, width: 70, formatter: TableUtils.formatter.image, export: false },
          { title: this.__('邮箱'), dataIndex: 'email', ops: 'LIKE' },
          { title: this.__('用户名称'), dataIndex: 'username', ops: 'LIKE' },
          { title: this.__('昵称'), dataIndex: 'nickname', ops: 'LIKE' },
          {
            title: this.__('角色'),
            dataIndex: 'role_id',
            searchList: () => {
              return api.admin.role.index({ limit: 0 }).then((response) => {
                const searchList = {}
                response.data.data.rows.forEach((row) => {
                  searchList[row.id] = row.name
                })
                return Promise.resolve(searchList)
              })
            },
            formatter: TableUtils.formatter.tag
          },
          { title: this.__('状态'), dataIndex: 'status', searchList: { 1: '正常', 0: '禁用' }, formatter: TableUtils.formatter.status },
          { title: this.__('登录失败次数'), dataIndex: 'loginfailure', sorter: true, ops: 'BETWEEN', visible: false },
          { title: this.__('Token失效时间'), dataIndex: 'token_expiry_time', sorter: true, ops: 'RANGE', width: 180, visible: false },
          { title: this.__('最近登录时间'), dataIndex: 'login_time', sorter: true, ops: 'RANGE', width: 180 },
          { title: this.__('创建时间'), dataIndex: 'create_time', sorter: true, ops: 'RANGE', width: 180 },
          { title: this.__('更新时间'), dataIndex: 'update_time', sorter: true, ops: 'RANGE', width: 180 },
          {
            title: this.__('table.operate'),
            ops: false,
            width: 130,
            fixed: 'right',
            buttons: [
              {
                name: 'log',
                title: this.__('操作日志'),
                text: this.__('日志'),
                events: {
                  click: (e, val, row, index, column, t) => {
                    TableUtils.dialog(t, () => import('@/views/admin/log/index'), {
                      initialFilters: {
                        admin_id: row.id + ',' + row.id
                      }
                    }, {
                      title: this.__('操作日志')
                    })
                  }
                }
              }
            ],
            formatter: TableUtils.formatter.operate,
            buttonHandle: (button, row) => {
              switch (button.name) {
                case 'detail':
                case 'log':
                  return true
                default:
                  return !row.disabled
              }
            }
          }
        ]
      }
    }
  },
  render () {
    return (<page-header-wrapper>
      <a-card bordered={false}>
        <ys-table config={this.tableConfig}></ys-table>
      </a-card>
    </page-header-wrapper>)
  }
}
</script>
